<template>
  <h3>首页</h3>
  <div id="section">
    <bLayoutGrid :instance="indexLayoutGrid" @pending="handlePending" @finish="handleFinish">
      <template #default>
        <bLayoutGridItem name="header">
          <div class="layout-item" style="flex-direction: row;">
            <div class="layout-item_base_column">
              <h5>用户</h5>
              <div class="user-count">
                <div>总人数：{{ indexLayoutGrid.charts[0].total }}</div>
                <div>用户人数：{{ indexLayoutGrid.charts[0].totalvisitor }}</div>
              </div>
            </div>
            <!-- <div class="user-count_box">
              <b3dBox :width="100" :height="100" :depth="100" :background="isDark ? '#1c1c1e' : '#fff'" :border="'none'"
                :textures="{
                  forward: indexLayoutGrid.avatar[0]?.fullUrl,
                  backward: indexLayoutGrid.avatar[1]?.fullUrl,
                  left: indexLayoutGrid.avatar[2]?.fullUrl,
                  right: indexLayoutGrid.avatar[3]?.fullUrl,
                  top: indexLayoutGrid.avatar[4]?.fullUrl,
                  bottom: indexLayoutGrid.avatar[5]?.fullUrl,
                }"></b3dBox>
            </div> -->
          </div>
        </bLayoutGridItem>
        <bLayoutGridItem name="a">
          <div class="layout-item">
            <div ref="userCount" class="full"></div>
          </div>
        </bLayoutGridItem>
        <bLayoutGridItem name="b">
          <div class="layout-item">
            <h5>菜单/身份</h5>
            <div class="layout-item_base_column">
              <div class="menu-count">
                <div>菜单：{{ indexLayoutGrid.charts[3].total }}</div>
                <div> 身份：{{ indexLayoutGrid.charts[3].roleTotal }}</div>
              </div>
              <div ref="menuCount" class="full"></div>
            </div>
          </div>
        </bLayoutGridItem>
        <bLayoutGridItem name="c">
          <div class="layout-item">
            <h5>区域</h5>
            <div class="layout-item_base">
              <div ref="roomCount" class="half-width"></div>
              <div ref="blockCount" class="half-width"></div>
            </div>
          </div>
        </bLayoutGridItem>
        <bLayoutGridItem name="d">
          <div class="layout-item">
            <h5>日志</h5>
            <bTable v-if="mList.show" :list="mList.list" :instance="mList"></bTable>
          </div>
        </bLayoutGridItem>
        <bLayoutGridItem name="e">
          <div class="layout-item">
            <h5>反馈</h5>
            <div class="layout-item_base">
              <div ref="suggestCount" class="full"></div>
            </div>
          </div>
        </bLayoutGridItem>
      </template>
    </bLayoutGrid>
  </div>
</template>
<script setup lang="ts">
import {
  IndexLayoutGrid,
  LogChart
} from "@b/index/dashboard";
import { onMounted, useTemplateRef, nextTick, onUnmounted } from "vue";
// import b3dBox from "@b/components/b_3d_box.vue";
import bLayoutGrid from "@/components/public/b_layout_grid.vue";
import bTable from "@/components/public/b_table.vue";
import bLayoutGridItem from "@/components/privately/layout_grid_item.vue";
// import { isDarkStore } from "@b/store/index";

const refs = [
  useTemplateRef("userCount"),
  useTemplateRef("roomCount"),
  useTemplateRef("blockCount"),
  useTemplateRef("menuCount"),
  useTemplateRef("suggestCount"),
];
const indexLayoutGrid = new IndexLayoutGrid();
const mList = new LogChart()
// const isDark = isDarkStore().isDark

indexLayoutGrid.getAvatar()

const handlePending = () => {
  indexLayoutGrid.dispose();
  mList.show = false
};

const handleFinish = () => {
  indexLayoutGrid.charts.forEach((item, index) => {
    item.init(refs[index].value);
  });
  indexLayoutGrid.getData();
  mList.show = true
};

onMounted(() => {
  nextTick(() => {
    indexLayoutGrid.charts.forEach((item, index) => {
      item.init(refs[index].value);
    });
    indexLayoutGrid.getData();
    mList.show = true
  });
});
onUnmounted(() => {
  indexLayoutGrid.dispose();
});
</script>

<style scoped>
h5 {
  margin-left: 12px;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  color: var(--el-text-color);
}

.full {
  width: 100%;
  height: 100%;
}

.half-width {
  width: 50%;
  height: 100%;
}

.half-height {
  width: 100%;
  height: 50%;
}

.layout-item {
  background-color: var(--el-bg-color);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  height: 100%;
}

.layout-item_base {
  flex-grow: 1;
  display: flex;
}

.layout-item_base_column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.user-count {
  font-size: 0.9em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  flex-grow: 1;
  flex-basis: 20px;
  margin-bottom: 16px;
}

.menu-count {
  font-size: 0.9em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.user-count_box {
  flex-grow: 1;
  flex-basis: 20px;
  height: 60%;
  width: 60%;
  align-self: center;
}
</style>
